<template>
	<view class="integrate">
		<u-sticky>
			<u-navbar title="积分中心" :background="{ backgroundColor: '#FED034' }" title-size="36" title-color="#333333" back-icon-size="40"></u-navbar>
			<view class="coin-section">
				<view class="balace_coin">
					<text class="num">{{ userInfo.availableGoldCoinCount || 0 }}</text>
					<text>金币余额(枚)</text>
				</view>
				<view class="balace_coin">
					<text class="num">{{ userInfo.consumeGoldCoinCount || 0 }}</text>
					<text>消耗金币(枚)</text>
				</view>
			</view>
			<view class="coin-title">
				金币明细
			</view>
		</u-sticky>
		<view class="coin-details" :class="[config.SW_INTEGRAL_TOPUP == 1 ? 'coin-margin' : null]">
			<scroll-view class="coin-list" :scroll-top="scrollTop" lower-threshold="80" scroll-y="true" @scrolltolower="lower">
				<view class="coin-item" v-for="(item, index) in coinList" :key="index">
					<view class="coin-info">
						<text class="info-title">{{ item.changeTypeDesc }}</text>
						<text>{{ $u.timeFormat(item.createTime, 'yyyy.mm.dd hh:ss') }}</text>
					</view>
					<view class="coin" :class="[item.changeCount > 0 ? 'add' : null]">
						{{ item.changeCount > 0 ? '+' : '' }}{{ item.changeCount }}
					</view>
				</view>
			 </scroll-view>
			<view class="coin-btn" v-if="config.SW_INTEGRAL_TOPUP == 1">
				<button type="default" class="recharge_coin" @click="onGo">充值金币</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex'
import empty from '@/components/empty.vue'
export default {
	components: {
		empty
	},
	data() {
		return {
			pageInfo: {
				currentPage: 1,
				totalPage: 0,
				pageSize: 10 // 每页数据的数量
			},
			coinList: [],
			scrollTop: 0,
		}
	},
	computed: {
		...mapState(['userInfo', 'isLoginStatus', 'config']),
	},
	onLoad() {
		this.loadData()
	},
	methods: {
		async loadData(){
			uni.showLoading()
			this.$u.get('/paopao/mini/user/getGoldCoinChangeRecord', this.pageInfo).then(res => {
				if(res && res.status == -1) {
					return
				}
				this.coinList.push(...res.items)
				this.pageInfo.totalPage = res.totalPage
				uni.hideLoading()
			})
		},
		lower(e) {
			let pageInfo = this.pageInfo
			if(pageInfo.currentPage < pageInfo.totalPage) {
				pageInfo.currentPage = pageInfo.currentPage + 1
				this.loadData()
			}
		},
		onGo() {
			this.$u.route('/pages/integrate/integrateCoin')
		}
	}
}
</script>

<style lang="less" scoped>
@import url("../../common/css/var.less");	
.integrate {
	background: #fff;
	overflow: hidden;
}
.coin-section {
	width: 100%;
	height: 250rpx;
	background: url(../../static/user/coin_bg.png) no-repeat center;
	background-size: contain;
	color: @mText;
	display: flex;
	.balace_coin {
		padding-top: 48rpx;
		width: 240rpx;
		text-align: center;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		.num {
			font-size: 64rpx;
			line-height: 80rpx;
		}
	}
}
.coin-title {
	border-radius: 32rpx 32rpx 0 0;
	line-height: 96rpx;
	text-align: center;
	font-size: 32rpx;
	color: @tText;
	background-color: #FFFFFF;
	margin-top: -55rpx;
}
.coin-margin {
	margin-bottom: 144rpx;
}
.coin-details {
	background: #FFFFFF;
	.coin-list {
		// height: 750rpx;
		overflow-x: hidden;
		overflow-y: auto;
		.coin-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 38rpx 32rpx 0;
			padding-bottom: 16rpx;
			border-bottom: 2rpx solid #E6E6E6;
			font-size: 24rpx;
			.coin-info {
				display: flex;
				align-items: flex-start;
				color: @tText;
				flex-direction: column;
				line-height: 40rpx;
			}
			.info-title {
				font-size: 32rpx;
				color: @mText;
				padding-bottom: 8rpx;
				line-height: 48rpx;
				font-weight: 500;
			}
			.coin {
				color: #FF6969;
				font-size: 40rpx;
				&.add {
					color: @mColor;
				}
			}
		}
	}
	
	.coin-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 24rpx 32rpx;
		// border-top: 2rpx solid #E6E6E6;
		.recharge_coin {
			line-height: 96rpx;
			background: #FF7B02 !important;
			box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.06);
			border-radius: 48rpx;
			color: #FFFFFF;
			font-size: 36rpx;
		}
	}
}

</style>
